<template>
  <!-- 商品使用申请 -->
  <div class="item-try-apply">
      <div class="steps">
        <div class="item active">
          <div class="number">1</div>
          <div class="text">符合条件</div>
        </div>
        <div class="item">
          <div class="number">2</div>
          <div class="text">免费申请</div>
        </div>
        <div class="item">
          <div class="number">3</div>
          <div class="text">申请成功</div>
        </div>
        <div class="item">
          <div class="number">4</div>
          <div class="text">使用报告</div>
        </div>
        <div class="middle-line"></div>
      </div>
      <div class="form">
        <div class="items" v-if="showConfig.display_tryout_name == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_name == 1" >*</span>姓名
          </label>
          <input
            v-model="formData.name"
            type="text"
            class="input"
            name="name"
            placeholder="请填写姓名"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_address == 1" @click="checkAddress">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_address == 1" >*</span>收货地址
          </label>
          <input
            v-model="addressMsgStr"
            type="text"
            class="input"
            disabled
            placeholder="点击选择"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_mobile == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_mobile == 1" >*</span>手机号码
          </label>
          <input
            v-model="formData.mobile"
            type="number"
            class="input"
            name="mobile"
            placeholder="请填写手机号码"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_sex == 1">
          <label class="fl">
            <span class="require-star" v-if="showConfig.must_tryout_sex == 1" >*</span>性别
          </label>
          <div class="freight-radio-group fl">
            <van-radio-group  v-model="formData.sex" icon-size="16" color="#CCCCCC" checked-color="#F20B22" direction="horizontal">
              <div class="freight-radio-box">
                <van-radio class="freight-radio" name="1">男</van-radio>
                <van-radio class="freight-radio" name="2">女</van-radio>
              </div>
            </van-radio-group>
          </div>
        </div>
        <div class="items" v-if="showConfig.display_tryout_age == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_age == 1" >*</span>年龄
          </label>
          <input
            v-model="formData.age"
            type="number"
            class="input"
            name="age"
            placeholder="请填写年龄"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_unit == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_unit == 1" >*</span>工作单位
          </label>
          <input
            v-model="formData.unit"
            type="text"
            class="input"
            name="unit"
            placeholder="请填写工作单位"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_unit_add == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_unit_add == 1" >*</span>单位地址
          </label>
          <input
            v-model="formData.unit_add"
            type="text"
            class="input"
            name="unit_add"
            placeholder="请填写单位地址"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_post == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_post == 1" >*</span>职务
          </label>
          <input
            v-model="formData.post"
            type="text"
            class="input"
            name="post"
            placeholder="请填写职务"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_id == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_id == 1" >*</span>身份证号
          </label>
          <input
            v-model="formData.tryout_id"
            type="text"
            class="input"
            name="tryout_id"
            placeholder="请填写身份证号"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_email == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_email == 1" >*</span>邮箱
          </label>
          <input
            v-model="formData.email"
            type="text"
            class="input"
            name="email"
            placeholder="请填写邮箱"
          />
        </div>
        <div class="items" v-if="showConfig.display_tryout_reason == 1">
          <label>
            <span class="require-star" v-if="showConfig.must_tryout_reason == 1" >*</span>申请原因
          </label>
          <input
            v-model="formData.reason"
            type="text"
            class="input"
            name="reason"
            placeholder="请填写申请原因"
          />
        </div>
      </div>

      <div class="form tips" v-if="showConfig.info.post_fee > 0">
        <div class="items" >
          <label>
            <span class="require-star" >*</span>所需运费
          </label>
          <input
            disabled
            v-model="showConfig.info.post_fee_str"
            type="text"
            class="input"
            name="reason"
            value="请填写申请原因"
          />
        </div>
      </div>

      <div class="btn-box">
        <div class="btn-submit" @click="clickSubmit">立即申请</div>
      </div>
      <address-dialog :visible.sync="addressVisible" @selectAddress="selectAddress"></address-dialog>

      <van-popup v-model="showSignPop"
                 class="sign-pop">
        <div class="sign-pop-con">
          <img src="https://img.wifenxiao.com/h5-wfx/images/activity/try_pop_bg.png" class="bg-img"/>
          <div class="pop-center">
            <span class="pop-num">
              {{showConfig.tryout_prompt}}
            </span>
            <!-- onClick="javascript :history.back(-1);"  -->
            <a class="sign-over red-gra-btn"
               href="javascript:;"
               @click="clickCloseSignPop">我知道了</a>
          </div>
        </div>
      </van-popup>
  </div>
</template>

<script>
  import noData from '@/components/noData/index'
  import { tryApplyForm, addTryOrder } from '@/api/item/activity'
  import { validateMobile } from '@/utils/validate'
  import addressDialog from '@/components/addressDialog'
  import Vue from 'vue'
  import { RadioGroup, Radio } from 'vant'

  Vue.use(Radio)
  Vue.use(RadioGroup)
export default Vue.extend({
    name: 'index',
    components: {
      noData,
      addressDialog
    },
    data() {
      return {
        noData: {
          text: '暂无评价',
          img: 'https://img.wifenxiao.com/h5-wfx/images/user/no-data.png',
          width: '214px',
          marginTop: '120px',
          txtMarginTop: '-30px'
        },
        params: {
          item_id: '',
          supplier: '',
          p: 1
        },
        addressVisible: false,
        showSignPop: false,
        addressMsg: {},
        addressMsgStr: '',
        showConfig: {
          display_tryout_address: '0', // 收货地址
          display_tryout_age: '0', // 年龄
          display_tryout_email: '0', // 邮箱
          display_tryout_id: '0', // 身份证号码
          display_tryout_mobile: '0', // 手机号码
          display_tryout_name: '0', // 姓名
          display_tryout_post: '0', // 职务
          display_tryout_reason: '0', // 申请原因
          display_tryout_sex: '0', // 性别
          display_tryout_unit: '0', // 工作单位
          display_tryout_unit_add: '0', // 单位地址,
          must_tryout_address: '0', // 收货地址是否必填,
          must_tryout_age: '0', // 年龄是否必填,
          must_tryout_email: '0', // 邮箱是否必填,
          must_tryout_id: '0', // 身份证号码是否必填,
          must_tryout_mobile: '0', // 手机号码是否必填,
          must_tryout_name: '0', // 姓名地址是否必填,
          must_tryout_post: '0', // 职务是否必填,
          must_tryout_reason: '0', // 申请原因是否必填,
          must_tryout_sex: '0', // 性别是否必填,
          must_tryout_unit: '0', // 工作单位是否必填,
          must_tryout_unit_add: '0', // 单位地址是否必填,
          tryout_prompt: '', // 申请成功后提示
          info: { post_fee: 0 } // 申请成功后提示
        },
        formData: {
          name: '',
          address_id: '',
          mobile: '',
          sex: '',
          age: '',
          company: '',
          company_address: '',
          job: '',
          id_card: '',
          email: '',
          reason: '',
          item_try_id: '',
          sku_id: '',
          is_freight: '',
          code: ''
        },
        loading: false,
        error: false,
        finished: false
      }
    },
    methods: {
      /**
       * 商品价格 整数放大
       */
      clickSubmit() {
        var data = []
        // 判断是否必填
        if (!this.formData.address_id) {
          if (this.showConfig.must_tryout_address == 1) {
            this.$Error('请选择收货地址')
            return false
          }
        } else {
          data.push({ value: this.formData.address_id, name: 'address_id' })
        }

        if (!this.formData.age) {
          if (this.showConfig.must_tryout_age == 1) {
            this.$Error('请输入年龄')
            return false
          }
        } else {
          data.push({ value: this.formData.age, name: 'age' })
        }

        if (!this.formData.email) {
          if (this.showConfig.must_tryout_email == 1) {
            this.$Error('请输入邮箱地址')
            return false
          }
        } else {
          data.push({ value: this.formData.email, name: 'email' })
        }

        if (!this.formData.id_card) {
          if (this.showConfig.must_tryout_id == 1) {
            this.$Error('请输入身份证号')
            return false
          }
        } else {
          data.push({ value: this.formData.id_card, name: 'id_card' })
        }

        if (!this.formData.mobile) {
          if (this.showConfig.must_tryout_mobile == 1) {
            this.$Error('请输入手机号码')
            return false
          }
        } else {
          data.push({ value: this.formData.mobile, name: 'mobile' })
        }

        if (!this.formData.name) {
          if (this.showConfig.must_tryout_name == 1) {
            this.$Error('请输入姓名')
            return false
          }
        } else {
          data.push({ value: this.formData.name, name: 'name' })
        }

        if (!this.formData.post) {
          if (this.showConfig.must_tryout_post == 1) {
            this.$Error('请输入职务')
            return false
          }
        } else {
          data.push({ value: this.formData.post, name: 'job' })
        }

        if (!this.formData.reason) {
          if (this.showConfig.must_tryout_reason == 1) {
            this.$Error('请输入申请原因')
            return false
          }
        } else {
          data.push({ value: this.formData.reason, name: 'reason' })
        }

        if (!this.formData.sex) {
          if (this.showConfig.must_tryout_sex == 1) {
            this.$Error('请选择性别')
            return false
          }
        } else {
          data.push({ value: this.formData.sex, name: 'sex' })
        }

        if (!this.formData.unit) {
          if (this.showConfig.must_tryout_unit == 1) {
            this.$Error('请输入单位')
            return false
          }
        } else {
          data.push({ value: this.formData.unit, name: 'company' })
        }

        if (!this.formData.unit_add) {
          if (this.showConfig.must_tryout_unit_add == 1) {
            this.$Error('请输入单位地址')
            return false
          }
        } else {
          data.push({ value: this.formData.unit_add, name: 'company_address' })
        }

        if (this.formData.mobile && !validateMobile(this.formData.mobile)) {
          this.$Error('请输入正确的手机号码')
          return false
        }

        data.push(
          { name: 'item_try_id', value: this.formData.item_try_id },
          { name: 'sku_id', value: this.formData.sku_id },
          { name: 'is_freight', value: this.formData.is_freight },
          { name: 'code', value: this.formData.code },
        )
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        addTryOrder({ data: JSON.stringify(data), 'item_try_id': this.formData.item_try_id, 'is_freight': this.formData.is_freight }).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.showSignPop = true
            this.$loadingWrap.close()
          } else {
            this.$Error(res.msg)
          }
        })
      },

      /**
       * 点击选择地址
       */
      checkAddress() {
        this.addressVisible = true
      },

      /**
       * 选择地址关闭弹出层
       */
      selectAddress(val) {
        this.addressMsg = val
        this.formData.address_id = val.address_id
        this.addressMsgStr = val.area + val.town + val.address
      },
      clickCloseSignPop() {
        // TODO 小程序修改路径
        this.$JumpName(this, 'tryList')
      },
      init(params) {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        tryApplyForm(params).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.showConfig = res.data
            if (this.showConfig.info.post_fee > 0) {
              this.showConfig.info.post_fee_str = this.showConfig.info.post_fee + '元 (审核通过后支付)'
            }
            this.formData.item_try_id = res.data.item_try_id
            this.formData.sku_id = res.data.item_detail.sku_id
            this.formData.is_freight = res.data.is_freight
            this.formData.code = res.data.code
          } else {
            this.$Error(res.msg)
          }
        })
      }
    },
    created() {
      const query = this.$route.query
      this.itemId = query.itemId
      this.init(query)
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
@import "src/styles/btn";
.item-try-apply{
  //签到成功弹窗
    .sign-pop {
      width: 600px;
      padding-bottom: 102px;
      background: transparent;
      .sign-pop-con {
        .bg-img{
          width: 100%;
          position: absolute;
        }
        overflow: hidden;
        position: relative;
        height: 716px;
        background: #fff;
        border-radius: 20px;
        .pop-center {
          position: absolute;
          height: 100%;
          width: 100%;
          .title {
            width: 430px;
            height: 149px;
            margin: 38px auto 0;
            font-size: 36px;
            text-align: center;
            font-weight: bold;
            color: #fff;
            padding-top: 18px;
            box-sizing: border-box;
          }
          img {
            display: block;
            width: 200px;
            margin: 0 auto;
          }
          span {
            display: block;
            font-size: 32px;
            line-height: 58px;
            color: #333333;
            text-align: center;
            margin: 0 atuo;
            &.pop-point {
              font-size: 32px;
              font-weight: bold;
              i {
                color: #ffae00;
              }
            }
            &.pop-num {
              font-size: 30px;
              margin-top: 70%;
              i {
                color: #f30c22;
              }
            }
          }
          .sign-over {
            display: block;
            width: 436px;
            line-height: 92px;
            border-radius: 46px;
            margin: 60px auto;
            text-align: center;
            color: #fff;
            font-size: 32px;
          }
          .sign-close {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 60px;
            height: auto;
            bottom: -100px;
          }
        }
      }
    }
  input:disabled{
    background-color: #ffffff;
  }
  .steps{
    background-color: #ffffff;
    padding: 45px 0;
    border-radius:0px 0px 20px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: relative;
    .item{
      z-index: 1;
      .number{
        width:62px;
        height:62px;
        background:#F5F5F5;
        border-radius:50%;
        font-size: 32px;
        font-weight:bold;
        color: #999999;
        text-align: center;
        line-height: 62px;
        margin: 0 auto;
      }
      .text{
        font-size: 26px;
        text-align: center;
        margin-top: 14px;
        color:#999;
      }
      &.active{
        .number{
          background:linear-gradient(154deg,#FE224E,#E90104);
          color: #ffffff;
        }
        .text{
          color: #F21228;
        }
      }
    }
    .middle-line{
      position: absolute;
      height:0;
      border:2px dashed #F2F2F2;
      width: 65%;
      top: 76px;
      z-index: 0;
    }
  }
  .form{
      margin:20px 25px;
        border-radius:20px;
        background: #fff;
        padding: 0 25px;
        .require-star{
          color:#F30C23;
        }
        .items{
          border-top:1px solid #ededed;
          font-size: 0;
          overflow: hidden;
          display: flex;
          &:first-child{
            border:0;
          }
          label{
            font-weight: 400;
            line-height:96px;
            margin-right: 62px;
            text-align-last: justify;
          }
          >label{
            display:inline-block;
            width:130px;
            font-size: 28px;
            &.long-label{
              width:120px;
            }
          }
          >input{
            width: calc(100% - 200px);
            display: inline-block;
            height: 95px;
            padding: 20px 0;
            font-size: 28px;
            color: #999999;
          }
          .unit{
            float:right;
            // margin-right:20px;
            font-size: 28px;
            line-height:96px;
          }
          .freight-radio-group{
            font-size: 28px;
            .freight-radio-box{
              display: flex;
              align-items: center;
              .freight-radio{
                height: 96px;
                display: flex;
                margin-right: 20px;
              }
              input:disabled{
                background:#f7f7f7;
              }
              .xmini{
              padding:0 6px;
              }
              .xmini,select{
                width:280px;
                height:72px;
                padding: 20px 15px;
                border:2px solid #ededed;
                border-radius:4px;
              }
              span{
                flex: 1;
                line-height: 96px;
                text-align: right;
              }
            }
          }
          &.items_img{
            padding-top:20px;
          }
          .img-box{
            width:500px;
            padding-top:20px;
          }
          .watch{
            font-size:24px;
            line-height:1.5;
            padding-bottom:30px;
            color:#333;
          }
          .editcontent{
            width:100%;
            height:300px;
            padding:0 20px;
            border-radius:6px;
            border:1px solid #f0f0f0;
            background:#fafafa;
          }
          .text_box{
            height:200px;
            border: 1px solid #EDEDED;
            textarea{
              font-size: 24px;
              line-height: 28px;
              width: 100%;
              height: 100%;
              padding: 20px;
              resize:none;
              background: transparent;
            }
          }
          .tip{
            font-size:24px;
            color: #999;
            padding:20px 0 40px;
          }
        }
    }
    .btn-box{
        margin:40px 20px;
        .btn-submit{
          height:90px;
          line-height:90px;
          border-radius:90px;
          font-size:28px;
          text-align:center;
          color:#fff;
          @include gradient(right,#FE1B49,#E90104);
        }
      }
}
</style>
